/**
 * 行内缺陷扫描结果卡片
 */

import React from 'react';
import MarkdownIt from 'markdown-it';
import './index.scss';

const md = new MarkdownIt();

function getAllSiblings(elem, filter) {
  const sibs = [];
  elem = elem.parentNode.firstChild;
  do {
    if (elem.nodeType === 3) continue; // text node
    if (!filter || filter(elem)) sibs.push(elem);
    elem = elem.nextSibling;
  } while (elem);
  return sibs;
}

export default class IssueCard extends React.Component {
  // hover到issue卡片时，高亮issue命中的行
  onMouseEnter = () => {
    const { issue, forceDiffViewType } = this.props;
    const { line_range } = issue;
    let active_line_codes = [];

    if (line_range.split('-').length > 1) {
      const [start, end] = line_range.split('-');
      for (let i = Number(start); i <= Number(end); i++) {
        active_line_codes.push(String(i));
      }
    } else if (line_range.split(',').length > 1) {
      const lineArr = line_range.split(',');
      active_line_codes = lineArr.map((item) => item);
    } else {
      active_line_codes.push(line_range);
    }

    active_line_codes.forEach((active_line_code) => {
      // 两种视图的逻辑不一样
      let lineAnchorDom;
      if (forceDiffViewType === 'unified') {
        const anchorSelector = '.diff-line';
        document.querySelectorAll(anchorSelector).forEach((item) => {
          const anchor = item.getAttribute('id');
          if (anchor) {
            const newLine = anchor.split('_')[anchor.split('_').length - 1];
            if (newLine === active_line_code) {
              lineAnchorDom = item;
            }
          }
        });
        const originalClass = lineAnchorDom.getAttribute('class');
        lineAnchorDom.setAttribute('class', `${originalClass} active-highlight-line`);
      } else {
        const anchorSelector = '.diff-gutter';
        document.querySelectorAll(anchorSelector).forEach((item) => {
          const anchor = item.getAttribute('id');
          if (anchor) {
            const newLine = anchor.split('_')[anchor.split('_').length - 1];
            if (newLine === active_line_code) {
              lineAnchorDom = item;
            }
          }
        });
        const allLineItem = getAllSiblings(lineAnchorDom);
        allLineItem.forEach((item) => {
          const originalClass = item.getAttribute('class');
          item.setAttribute('class', `${originalClass} active-highlight-line`);
        });
      }
    });
  };

  // 鼠标离开issue卡片时，取消高亮issue命中的行
  onMouseLeave = () => {
    document.querySelectorAll('.active-highlight-line').forEach((item) => {
      const className = item.getAttribute('class');
      item.setAttribute('class', className.replace(' active-highlight-line', ''));
    });
  };

  render() {
    const { issue, headerRightArea } = this.props;

    return (
      <div className="issue-card" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
        <div className="issue-card-header">
          <div className="issue-card-header-left">
            <span className="issue-card-header-name">{issue.type}</span>
          </div>
          <div className="issue-card-header-right">{headerRightArea}</div>
        </div>
        <div className="issue-card-body">
          <div
            dangerouslySetInnerHTML={{
              __html: md.render(issue.message || ''),
            }}
            className={'markdown-body'}
          />
        </div>
      </div>
    );
  }
}
